<template>
  <view v-if="shenheStatus == 0" class="nickname">
    <view class="">
      <u-input
        v-model="value"
        type="text"
        :placeholder="$t('user.nickname')"
        focus
      />
    </view>
    <view>{{ $t('user.nickTip') }}</view>
    <view @click="modifyNickname" class="btn flex-y-center flex-x-center">{{
      $t('user.edit')
    }}</view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      value: '',
    };
  },
  methods: {
    async modifyNickname() {
      if (this.value.length <= 0)
        return this.$utils.toast(this.$t('user.empty'));
      const res = await this.$allrequest.user.modifyUserInfo({
        nickname: this.value,
      });
      if (res.code == 0) {
        this.$utils.goBack();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.nickname {
  min-height: 100vh;
  background: #f2f2f2;
  box-sizing: border-box;
  > view:nth-child(1) {
    background: #fff;
    padding: 0 36rpx;
    /deep/.u-input__input {
      color: #262626;
      width: 100%;
      font-size: 30rpx;
      height: 100rpx;
      line-height: 100rpx;
    }
  }
  > view:nth-child(2) {
    margin: 24rpx 36rpx 80rpx;
    line-height: 34rpx;
    font-size: 24rpx;
    color: #8c8c8c;
  }
  .btn {
    margin: 0 auto;
    width: 678rpx;
    height: 88rpx;
    background: #f0250e;
    opacity: 1;
    border-radius: 120rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>
